window.onload = function(){
    var lis = document.getElementsByTagName("li"),
        pre = document.getElementById("pre"),
        next = document.getElementById("next"),
        count = 0,
        t,
        dot = document.getElementById("dot");
    lis[0].style.display = "block";
    init();
    function init(){
        createDot(lis.length);
        pre.onclick = function(){
            count--;
            changeImg();
        }
        next.onclick = function(){
            count++;
            changeImg();
        }
        var t = setTimeout(function(){
            next.click();
        },2000)
    }
    var dots = document.getElementsByTagName("span");
    dots[0].className = "active";
    function createDot(length){
        var fr = document.createElement("div");
        fr.className = "dot";
        for(var i=0;i<length;i++){
            var span = document.createElement("span");
            span.index = i;
            span.onclick = function(){
                count = this.index;
                changeImg();
            }
            fr.appendChild(span);
        }
        dot.appendChild(fr);
    }
    function changeDot(num){
        for(var i=0;i<lis.length;i++){
            dots[i].className = "";
        }
        dots[num].className = "active";
    }
    function changeImg(){
        clearTimeout(t);
        pre.disabled = true;
        next.disabled = true;
        var show = document.getElementById("show");
        if(count<0){
            count = lis.length-1;
        }else if(count>lis.length-1){
            count = 0;
        }
        show.style.zIndex = 1;
        fadeOut(show,function(){
            show.style.zIndex = 0;
            show.style.display = "none";
            show.style.opacity = 1;
            show.id = "";
            lis[count].id = "show";
            pre.disabled = false;
            next.disabled = false;
            t = setTimeout(function(){
                next.click();
            },2000)
        });
        lis[count].style.display = "block";
        changeDot(count);
    }
    function fadeOut(ele,callback){
        clearInterval(ele.t);
        ele.alpha = 100;
        var speed = -2;
        ele.t = setInterval(function(){
            ele.alpha += speed;
            ele.style.opacity = ele.alpha/100;
            ele.style.filter = "alpha(opacity="+ele.alpha+")";
            if(ele.alpha==0){
                clearInterval(ele.t);
                if(callback){
                    callback();
                }
            }
        },16);
    }


}